<template>
	<view class="kindDetail">
		<view class="menus">
			<view @click='page = 1;selKind = item.styleId;initContent()' :class="['menuOne',selKind == item.styleId?'active':'']" v-for="(item,index) in kind" :key='index'>
				<text>{{item.style_name}}</text>
				<view class="line"></view>
			</view>
		</view> 
		<view class="content" v-html='datas.intro'></view>
		<view class="seat"></view>
		<view class="btns dFlex jCenter_aCenter">
			<view class="btn" @click='goPage("./allKind?styleId="+styleId+"&styleName="+styleName)'>查看门店</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleId:'',
				styleName:'',
				kind:[],
				selKind:"",
				datas:{},
			};
		},
		onLoad(e){
			this.styleId = e.styleId?e.styleId:'';
			this.styleName = e.styleName;
			uni.setNavigationBarTitle({
				title:e.styleName,
			})
			// this.initContent();
			this.initKind();
		},
		methods:{
			initKind(){
				this.tool.getData('Index/styleLists',{
					styleId: this.styleId,
				}).then(res=>{
					console.log(res);
					if(res){
						this.kind = res;
						this.selKind = res[0].styleId;
						this.initContent();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initContent(){
				this.tool.getData('Index/styleInfo',{
					styleId: this.selKind,
				}).then(res=>{
					console.log(res);
					if(res){
						const reg = new RegExp('<img', 'gi');
						res.intro = res.intro.replace(reg, `<img style="width: 100%!important;"`);
						this.datas = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			goPage(url){
				uni.navigateTo({
					url:url,
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background:white;
	}
	.kindDetail{
		position: relative;
		width:100%;
		.menus{
			width: 100%;
			padding:0 12px 12px;
			box-sizing: border-box;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			.menuOne{	
				display: inline-block;
				width:auto;
				text-align: center;
				font-weight: bold;
				color:#999999;
				padding:2px 7px;
				border-radius: 50px;
				margin-right: 10px;
				background:#ecf5ff;
				font-size:12px;
				// .line{
				// 	width: 21px;
				// 	height: 2px;
				// 	border-radius: 50px;
				// 	margin: 7px auto 0;
				// 	background: none;
				// }
			}
			.active{
				color: white;
				font-size:14px;
				background:#1664FF;
				// .line{
				// 	background: #1664FF;
				// }
			}
		}
		
		.btns{
			width: 100%;
			padding:12px;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				width:100%;
				padding: 12px 0;
				text-align: center;
				color: white;
				border-radius: 5px;
				font-size: 12px;
				background: #1664FF;
			}
		}
		.content{
			width:100%;
			padding:12px;
			box-sizing: border-box;
			border-radius: 5px;
		}
	}
</style>
